<template>
  <div class="image-view" @click="onclick">
    <img
      :class="round ? ' round image' : 'image'"
      :src="src"
      :mode="mode"
      :lazy-load="lazyLoad"
      @error="onError"
      @load="onLoad"
      v-show="!isLoading"
    >
    <img
      :class="round ? 'round image' : 'image'"
      :src="imageSrc"
      :mode="mode"
      :lazy-load="lazyLoad"
      v-show="isLoading || error"
    />
  </div>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: ''
      },
      mode: {
        type: String,
        default: 'widthFix'
      },
      lazyLoad: {
        type: Boolean,
        default: true
      },
      round: {
        type: Boolean,
        default: false
      },
      imageSrc: require('../../../static/images/load_img.jpg')
    },
    watch: {
      src (newValue, preValue) {
        if (newValue && newValue.length > 0 && newValue !== preValue) {
          this.$nextTick(() => {
            this.isLoading = true
            this.error = false
          })
        }
      }
    },
    data () {
      return {
        isLoading: true,
        error: false
      }
    },
    methods: {
      onclick () {
        this.$emit('onClick')
      },
      onLoad () {
        this.isLoading = false
        this.error = false
      },
      onError () {
        this.error = true
        this.isLoading = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .image-view {
    width: 100%;
    height: 100%;
    .round {
      border-radius: 50%;
    }
    .image {
      width: 100%;
    }
  }
</style>
